<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<link rel="stylesheet" href="../../styles/bootstrap.css">
<link rel="stylesheet" href="../../fonts/themify-icons/themify-icons.min.css">
<link rel="stylesheet" href="../../fonts/weather-icons/css/weather-icons.min.css">

<link rel="stylesheet" href="js/bootstrap.js">

<html>
  <head>
    
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
    
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
    
    <script>
      function getImgData(chartContainer) {
        var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);

        canvas.setAttribute(
          'style',
          'position: absolute; ' +
          'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
          'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        doc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL("image/png");
        canvas.parentNode.removeChild(canvas);
        return imgData;
      }
      function getImgDataViejo(chartContainer) {
        //var chartArea = chartContainer.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');
        var chartArea = chartContainer.getElementsByTagName('div')
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);
        
        
        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        doc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL("image/png");
        canvas.parentNode.removeChild(canvas);
        return imgData;
      }
      function saveAsImg(chartContainer) {
        var imgData = getImgData(chartContainer);
        
        // Replacing the mime-type will force the browser to trigger a download
        // rather than displaying the image in the browser window.
        window.location = imgData.replace("image/png", "image/octet-stream");
      }
      function toImg(chartContainer, imgContainer) { 
        var doc = chartContainer.ownerDocument;
        var img = doc.createElement('img');
        img.src = getImgData(chartContainer);
        
        while (imgContainer.firstChild) {
          imgContainer.removeChild(imgContainer.firstChild);
        }
        imgContainer.appendChild(img);
      }
    </script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart", "treemap", "geochart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      //----------------------------------------Variables-------------------------------------------
        var chart;
        var grafica = localStorage.getItem("tipoGrafica");
        var data = new google.visualization.DataTable();
          data.addColumn('string', 'Valor');
          data.addColumn('number', 'Cantidad de Textos');
          data.addRows(etiquetas);
        var options = {
          title: 'Company Performance'
        };

        switch (grafica){
              case "linea"
                  chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                  break;
              case "torta"
                  chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                  break;
              case "columna"
                  chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                  break;
              case "barras"
                  chart = new google.visualization.BartChart(document.getElementById('chart_div'));
                  break;
        }

        chart.draw(data, options);
      }
      google.load('visualization', '1', {packages:['linechart', 'corechart']});
      google.setOnLoadCallback(window.drawChart);       
      }
    </script>
  </head>



  <body>
    <div class="container">
      
      <div id="contenedorReporte" style="width:100% height:100%"></div>
  
      <div class="well">
      
        <div class="container">

          <div class="col-md-4 col-md-offset-2">
            <div class="btn-group">
              <button type="button" disabled class="btn btn-primary">
                <a href="">
                  <i class="ti-layout-media-left" style="color:white"></i>
                </a>
              </button>
              <button type="button" disabled class="btn btn-primary">
                <a href="">
                  <i class="ti-layout-media-center" style="color:white"></i>
                </a>                
              </button>
              <button type="button" disabled class="btn btn-primary">
                <a href="">
                  <i class="ti-layout-media-left" style="color:white"></i>
                </a>
              </button>
            </div>

            <div class="btn-group">
              <button class="btn btn-primary" onclick="saveAsImg(document.getElementById('contenedorReporte'));">
                <i class="ti-cloud-down" style="color:white"></i>
              </button>
              <button class="btn btn-primary" onclick="toImg(document.getElementById('contenedorReporte'), document.getElementById('img_div'));"><i class="ti-camera" style="color:white"></i></button>
            </div>

            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="ti-filter" style="color:white"></i></button>

          </div>

          <div class="col-md-3">
            <button type="button" class="btn btn-success btn-block" id="generar"><span class="ti-control-play"></span></button>
          </div>

        </div>      
      </div>

    </div>

  
    <div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9">
      Image will be placed here
    </div>
 


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


 
</body>
</html>
